require('./PageQrHome.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Control } from 'react-keeper'
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells,
  Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,
  MediaBoxInfoMeta,Input,CellsTips,Icon,Label,CellsTitle,Toptips,Toast,Dialog,Flex,FlexItem,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea,SearchBar,PreviewItem} from  'react-weui/build/packages'

import rypic from '../../../assets/icon/人员新增.png';

class QrHome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,
    }
    this.showLoading = this.showLoading.bind(this);
    this.upLogin = this.upLogin.bind(this);

  }
  upLogin() {

    Actions.uplogin();
  }

  showLoading() {
    this.setState({showLoading: true});
    this.state.loadingTimer = setTimeout(()=> {
      this.setState({showLoading: false});
    }, 2000);
  }

  render() {
    let t = this;
    return (
      <div className="page qrhome">
        <div>1</div>
        <page>
          <Panel className="head-panel">
            <PanelHeader >
              <div className="title-bg"/>
              扫一扫
            </PanelHeader>
            <PanelBody>
              <FlexItem >
                <div className="grid-qr">
                  <p style={{paddingTop:'15px'}}><img height="30" width="30" src={rypic}/></p>
                  <h2 id="menu-scan">{this.state.qr.userInfo.name}</h2>
                  <h2 id="menu-scan">{this.state.qr.userInfo.telNum}</h2>

                </div>
              </FlexItem>



              <div className= { 'editshow'}>
                <Button type="primary" onClick={this.upLogin}
                        disabled={this.state.qr.isUpload}
                >登录</Button>
              </div>
            </PanelBody>
          </Panel>
        </page>
      </div>
    );
  }


  notice() {
  }


  componentWillMount() {
    Actions.initMode();
    if(Control.state){
      console.log('有值');
      Actions.loadMode(Control.state);
    }

  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.qrInfo || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] ) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] ) {
        return true;
      }
    }
    return false;
  }
}

QrHome.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
  urlShow: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(QrHome, Reflux.connect(Store, 'qr'));


export default QrHome ;
